4-高阶组件

Create by fall on 2021-12-19
Recently revised in 2021-12-26

高阶组件

（HOC）

我觉得抛弃的主要原因是，多个组件公用的是一套，对象的属性，这个可以改变，那个组件也可以改变，换成现在高阶函数后，提供的是一套模板

跟高阶函数差不多，参数为一个组件，返回值为新组件的函数

高阶组件的意义就是让一个多次出现的逻辑，在多个组件之中进行共享

function logPorps(WrappedComponent){
  class LogProps extends React.Component{
    componentDidUpdate(prevProps){
      console.log('old props:');
      console.log('new props:');
    }
    render(){
      return(<WrappedComponent {...this.props}></WrappedComponent>)
    }
  }
  return LogProps
}

TENET：不要修改组件，记住，所产生的代码是没有任何副作用的纯函数

错误的书写方式

// 除非你知道这个组建的 HOC 是如何运作的，并且能避免和其他的 HOC 发生冲突，但也会因为这种书写方式大大降低可维护性
function logProps(InputComponent) {
  InputComponent.prototype.componentDidUpdate = function(prevProps) {
    console.log('Current props: ', this.props);
    console.log('Previous props: ', prevProps);
  };
  // 返回原始的 input 组件，暗示它已经被修改。
  return InputComponent;
}
// 每次调用 logProps 时，增强组件都会有 log 输出。
const EnhancedComponent = logProps(InputComponent);

正确的书写方式

function logProps(WrappedComponent){
  return class extends React.Component{
    componentDidUpdate(prevProps){
      console.log('Current props',this.props)
    }
  }
  render(){
    return <WrappedComponent {...this.props} />
  }
}

特性

将不相关的 props 传递给被包裹的组件

(向组件添加特性，自身不应该大幅改变)

render(){
  c
}

不要在 render 方法中使用 HOC

务必复制静态方法

Refs 不会被传递

高阶组件​

特性​

高阶组件

特性